import Vue from 'vue';

// store/modules/colors.js
const state = () => ({
    pathColors: [],
    selectColor: [],
    selectFont: [],
});

const mutations = {
    SET_PATH_COLORS(state, payload) {
        state.pathColors = payload;
    },
    UPDATE_PATH_COLOR(state, { id, fill }) {
        const path = state.pathColors.find(p => p.id === id);
        if (path) {
            // Use Vue.set for reactivity when modifying nested objects
            Vue.set(path, 'fill', fill);
        }
    },
    LOAD_SAVED_COLORS(state, payload) {
        state.pathColors = payload;
    },
    CLEAR_COLORS(state) {
        state.pathColors = [];
    },
    SET_SELECT_COLORS(state, payload) {
        state.selectColor = payload;
    },
    SET_SELECT_FONTS(state, payload) {
        state.selectFont = payload;
    }
};

const actions = {
    setPathColors({ commit }, colors) {
        commit('SET_PATH_COLORS', colors);
    },
    updatePathColor({ commit }, payload) {
        commit('UPDATE_PATH_COLOR', payload);
    },
    loadSavedColors({ commit }, colors) {
        commit('LOAD_SAVED_COLORS', colors);
    },
    clearColors({ commit }) {
        commit('CLEAR_COLORS');
    },
    setSelectColors({ commit }, colors) {
        commit('SET_SELECT_COLORS', colors);
    },
    setSelectFonts({ commit }, fonts) {
        commit('SET_SELECT_FONTS', fonts);
    }
};

const getters = {
    getPathColors: state => state.pathColors,
    getPathColorById: state => id => state.pathColors.find(p => p.id === id),
};

export default {
    namespaced: true,
    state,
    mutations,
    actions,
    getters
};